<?php echo $this -> Html -> script('jquery.validate.js'); ?>
<script type="text/javascript">

$(document).ready(function(){
	$('#CustomerAddForm').validate({
		rules: {
			CustomerCustomerName:{
					required: true
				},
			CustomerBirthday:{
					digits: true,
					maxlength: 2,
					minlength: 1
				}
			},
		messages: {
			CustomerCustomerName:{
				required: "あなたの名前を入力してください！"
			},
			CustomerBirthday:{
				digits: "数字だけを入力してください！",
				number: "数字だけを入力してください！",
				maxlength: "数字の長さは２数字を入力ください！",
				minlength: "数字の長さは２数字を入力ください！"
			}
			}
	});

	$('#addMobile').bind('keypress change', function() {
		$('#messageAddMobile').empty();
	});
	
	$('#addCustomerMobile').click(function(){
		$('#messageAddMobile').empty();
		if ($('#CustomerAddForm').validate().form()) {
			$.ajax( {
				type : 'POST',
				url : pathRoot + 'customers/getMobile',
				data : {
					mobile : $('#addMobile').val()
				},
				cache : false,
				success : function(jsondata) {
					if (jsondata == "insert") {
						$('#CustomerAddForm').submit();
					} else {
						$('#messageAddMobile').html('電話番号が既に登録されています。<br>ご確認ください。');
					}
				}
			});
		}
	})
});
</script>
<style>
label.error
{
	color: red;
}
</style>
<?php
	echo $this -> Form -> create('Customer', array('data-ajax'=>'false'));
?>

<div>
<table>
	<tr>
		<td >お名前</td>
		<td ><?php
			echo $this -> Form -> input('customerName', array('label' => ''));
		?></td>
	</tr>
	<tr>
		<td>年齢</td>
		<td><?php
			echo $this -> Form -> input('birthday', array('label' => ''));
		?></td>
	</tr>
	<tr>
		<td width="20%" nowrap="nowrap">電話番号</td>
		<td>
			<?php
				echo $this -> Form -> input('mobile', array('label' => '', 
											'id' => 'addMobile', 
											'style' => 'ime-mode:disabled;'));
			?>
			<br>
			<label style="color: red;" id="messageAddMobile"></label>
		</td>
	</tr>
</table>
<p>初診の方は保険証を必ず持参し、<br> 予約の３０分前までに受付をして下さい。
</p>
</div>
<?php
	echo $this -> Form -> button('予約画面へ', array('type'=>'button','id' => 'addCustomerMobile', 'data-role'=>'button', 'data-transition'=>'fade', 'data-theme'=>'b'));
	echo $this -> Form -> end();
?>